<style lang="less" scoped>
@import "./rent.less";
</style>
<template>
  <div>
  
    <Row>
  
      <Col span="24">
  
      <Card>
  
        <p slot="title" style="height: 32px">
  
          <Button type="primary" @click="alertAdd" icon="plus-round">客户资料录入</Button>
  
        </p>
  
        <div>
  
          <Table :columns="columnsList" width="100%" :data="tableData" border disabled-hover></Table>
  
        </div>
  
        <div class="margin-top-15" style="text-align: center">
  
          <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
  
        </div>
  
      </Card>
  
      </Col>
  
    </Row>
  
    <Modal v-model="modalRentSetting.show" title="Common Modal dialog box title" width="668" :styles="{top: '30px'}" @on-visible-change="doCancelTerm">
  
      <p slot="header" style="color:#2d8cf0;">
  
        <Icon type="information-circled"></Icon>
  
        <span>缴纳房租信息录入</span>
  
      </p>
  
      <p class="title">已缴纳期数：<span class="tip">{{rentForm.termed}}</span> 总共期数 ：<span class="tip">{{rentForm.terms}}</span></p>
  
      <Form :model="rentForm" :label-width="80">
  
        <FormItem label="缴费期数" prop="term">
  
          <Select v-model="rentForm.term" @on-change="queryMoney">


                          <Option  :value=1 :key=1>1期</Option>
  
                          <Option  :value=2 :key=2>2期</Option>
  
                          <Option  :value=3 :key=3>3期</Option>
  
                          <Option  :value=4 :key=4>4期</Option>
  
                          <Option  :value=5 :key=5>5期</Option>
  
                          <Option  :value=6 :key=6>6期</Option>
  
                          <Option  :value=7 :key=7>7期</Option>
  
                          <Option  :value=8 :key=8>8期</Option>
  
                          <Option  :value=9 :key=9>9期</Option>
  
                      </Select>
  
        </FormItem>
  
        <FormItem label="缴纳金额" prop="money">
  
          <Input v-model="rentForm.money" disabled><span slot="append">元</span></Input>
  
        </FormItem>
  
        <FormItem label="缴费时间" prop="create_time">
  
          <DatePicker type="datetime" v-model="rentForm.time"  @on-change="billTime" placeholder="Select date" style="width: 180px;margin-left:5px"></DatePicker>
  
        </FormItem>
  
      </Form>
  
      <div slot="footer">
  
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
  
        <Button type="primary" @click="submitRentForm">确认提交</Button>
  
      </div>
  
    </Modal>
  
    <Modal v-model="modalRentViewSetting.show" title="Common Modal dialog box title" width="80%" :styles="{top: '30px'}" @on-visible-change="Term">
  
      <p slot="header" style="color:#2d8cf0;">
  
        <Icon type="information-circled"></Icon>
  
        <span>缴纳房租信息</span>
  
      </p>
  
      <div>
  
        <Table :columns="rentColumns" :data="rentData" border disabled-hover></Table>
  
      </div>
  
      <div class="margin-top-15" style="text-align: center">
  
        <Page :total="rentTableShow.count" :current="rentTableShow.page" :page-size="rentTableShow.size" @on-change="rentChangePage" @on-page-size-change="rentChangeSize" show-elevator show-sizer show-total></Page>
  
      </div>
  
    </Modal>
  
    <Modal v-model="modalSetting.show" width="668" :styles="{top: '30px'}" @on-visible-change="doCancel">
  
      <p slot="header" style="color:#2d8cf0;">
  
        <Icon type="information-circled"></Icon>
  
        <span>{{formItem.id ? '编辑' : '新增'}} 租赁关系</span>
  
      </p>
  
      <Form ref="myForm" :rules="ruleValidate" :model="formItem" :label-width="80">
  
        <FormItem label="房源名称" prop="name">
  
          <Select v-model="formItem.name" filterable remote :remote-method="searchHouse" :loading="loadingHouse">
  
              <Option v-for="(option, index) in houses" :value="option.id" :label="option.title" :key="index">

                  <span>{{option.title}}</span>

                  <span style="float:right;color:#ccc">{{option.street}}</span>

              </Option>

          </Select>
  
        </FormItem>
  
        <FormItem label="承租人" prop="user">
  
          <!-- <Input v-model="formItem.user_id" placeholder="请输入承租人"></Input> -->
  
          <Select v-model="formItem.user" filterable remote :remote-method="searchUser" :loading="loadingUser">
  
                              <Option v-for="(option, index) in user" :value="option.id" :key="index">{{option.real_name}}</Option>
  
                          </Select>
  
        </FormItem>
  
        
  
        <FormItem label="联系方式" prop="phone">
  
          <Input v-model="formItem.phone" :maxlength="11" placeholder="请输入联系方式"></Input>
  
        </FormItem>
  
        <FormItem label="合同期">
  
          <span>开始日期</span>
  
          <DatePicker type="date" @on-change="startTime($event);changeStartSetEnd()" placeholder="Select date" style="width: 180px;margin-left:5px"></DatePicker>
  
          <span @click="endTime">结束日期</span>
  
          <DatePicker type="date" v-model="date.end" placeholder="Select date" style="width: 180px;margin-left:5px" disabled readonly></DatePicker>
  
        </FormItem>
  
        <FormItem label="月租金">
  
          <Input v-model="formItem.month">
  
          <span slot="append">元</span>
  
          </Input>
  
        </FormItem>
  
        <!-- <FormItem label="周租金">
  
          <Input v-model="week">
  
          <span slot="append">元</span>
  
          </Input>
  
        </FormItem> -->
  
        <FormItem label="利率">
  
          <Input v-model="formItem.rate">
  
          <span slot="append">‰</span>
  
          </Input>
  
        </FormItem>
  
        <FormItem label="租房期限">
  
          <Select v-model="formItem.term" @on-change="changeStartSetEnd">
  
                          <Option  :value=1 :key=1>1个月</Option>
  
                          <Option  :value=2 :key=2>2个月</Option>
  
                          <Option  :value=3 :key=3>3个月</Option>
  
                          <Option  :value=4 :key=4>4个月</Option>
  
                          <Option  :value=5 :key=5>5个月</Option>
  
                          <Option  :value=100 :key=100>半年</Option>
  
                          <Option  :value=7 :key=7>7个月</Option>
  
                          <Option  :value=8 :key=8>8个月</Option>
  
                          <Option  :value=9 :key=9>9个月</Option>
  
                          <Option  :value=10 :key=10>10个月</Option>
  
                          <Option  :value=11 :key=11>11个月</Option>
  
                          <Option  :value=101 :key=101>1年</Option>
  
                          <Option  :value=102 :key=102>2年</Option>
  
                          <Option  :value=103 :key=103>3年</Option>
  
                      </Select>
  
        </FormItem>
  
        <FormItem label="收款周期">
  
          <Select v-model="formItem.payment">
  
                          <Option  :value=1 :key=1>7天</Option>
  
                          <Option  :value=2 :key=2>14天</Option>
  
                          <Option  :value=4 :key=4>1个月</Option>
  
                      </Select>
  
        </FormItem>
  
        <FormItem label="押金金额">
  
          <Input v-model="formItem.cash">
  
          <span slot="append">元</span>
  
          </Input>
  
        </FormItem>
  
        <!-- <FormItem label="押金期数">
  
          <Input v-model="formItem.cash_term">
  
          <span slot="append">期</span>
  
          </Input>
  
        </FormItem> -->
        <FormItem label="业务员" prop="salesman">
  
          <Select v-model="formItem.salesman" filterable remote :remote-method="searchSalesman" :loading="loadingSalesman">
  
                              <Option v-for="(option, index) in salesman" :value="option.id" :label="option.name" :key="index">
  
                                  <span>{{option.name}}</span>
  
                                  <span style="float:right;color:#ccc">{{option.city}}&nbsp;&nbsp;电话：{{option.phone}}</span>
  
                              </Option>
  
                          </Select>
  
        </FormItem>
  
      </Form>
  
      <div slot="footer">
  
        <Button type="text" @click="cancel" style="margin-right: 8px">取消</Button>
  
        <Button type="primary" @click="submit" :loading="modalSetting.loading">信息确认无误，提交保存</Button>
  
      </div>
  
    </Modal>
    <Modal v-model="interest.show" width="996" :styles="{top: '30px'}">
      <Card>
        <div>
  
          <Table :columns="interestList" width="100%" :data="interestData" border disabled-hover></Table>
  
        </div>
  
        <div class="margin-top-15" style="text-align: center">
  
          <Page :total="interest.count" :current="interest.page" :page-size="interest.size" @on-change="changeInterestPage" @on-page-size-change="changeInterestSize" show-elevator show-sizer show-total></Page>
  
        </div>
      </Card>
    </Modal>
  </div>
</template>
<script>
const editButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,

        title: "您确定要这笔订单失效么? ",

        transfer: true
      },

      on: {
        "on-ok": () => {
          axios
            .patch(resourse + "/" + currentRow.id + "/lose")
            .then(function(response) {
              currentRow.loading = false;

              if (response.data.code === 200) {
                vm.$Message.success("成功");
              } else {
                if (response.data.code === 403) {
                  vm.$store.commit("logout", this);

                  vm.$router.push({
                    name: "login"
                  });
                } else {
                  vm.$Message.error(response.data.msg);
                }
              }

              vm.getList();
            });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },

          props: {
            type: "primary",

            placement: "top"
          }
        },

        "失效"
      )
    ]
  );
};

const viewButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },

      style: {
        margin: "0 5px"
      },

      on: {
        click: () => {
          {
            vm.modalRentViewSetting.show = true;

            vm.rentTableShow.rent = currentRow.id;

            vm.modalRentViewSetting.index = index;

            vm.getRentOrder();
          }
        }
      }
    },

    "查看"
  );
};

const addrentButton = (vm, h, currentRow, index) => {
  return h(
    "Button",
    {
      props: {
        type: "primary"
      },

      style: {
        margin: "0 5px"
      },

      on: {
        click: () => {
          {
            if (currentRow.status == 0) {
              vm.$Message.error("用户未确认订单");
            } else {
              console.log(currentRow);

              vm.rentForm.id = currentRow.id;

              vm.rentForm.termed = currentRow.termed;

              vm.rentForm.terms = currentRow.terms;

              vm.rentForm.time = new Date();
              // vm.rentForm.money = parseFloat(currentRow.bill);

              vm.modalRentSetting.show = true;

              vm.modalRentSetting.index = index;
            }
          }
        }
      }
    },

    "添加"
  );
};

const deleteButton = (vm, h, currentRow, index) => {
  return h(
    "Poptip",
    {
      props: {
        confirm: true,

        title: "您确定要删除这条数据吗? ",

        transfer: true
      },

      on: {
        "on-ok": () => {
          axios.delete(resourse + "/" + currentRow.id).then(function(response) {
            currentRow.loading = false;

            if (response.data.code === 200) {
              vm.tableData.splice(index, 1);

              vm.$Message.success(response.data.msg);
            } else {
              if (response.data.code === 403) {
                vm.$store.commit("logout", this);

                vm.$router.push({
                  name: "login"
                });
              } else {
                vm.$Message.error(response.data.msg);
              }
            }
          });
        }
      }
    },
    [
      h(
        "Button",
        {
          style: {
            margin: "0 5px"
          },

          props: {
            type: "error",

            placement: "top",

            loading: currentRow.isDeleting
          }
        },

        "删除"
      )
    ]
  );
};

const resourse = "rent";

import axios from "axios";

export default {
  data() {
    return {
      date:{
        
      },
      interest:{
        show:false,
        count:0,
        page:1,
        size:10,
        rent:0
      },
      interestList:[
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "类别",
          key: "type",
          align: "center"
        },
        {
          title: "用户",
            key: "user",
          align: "center",
          // render: (h, params) => {
          //   return h("div", params.row.user.real_name);
          // }
        },
        {
          title: "金额",
          key: "money",
          align: "center"
        },
        {
          title: "时间",
          key: "pay_data",
          align: "center"
        },
        {
          title: "状态",
          align: "center",
          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  color:
                    params.row.status == 0
                      ? "yellow"
                      : params.row.status == 1
                        ? "green"
                        : params.row.status == 2 ? "red" : ""
                }
              },
              params.row.status == 0
                ? "未扣款"
                : params.row.status == 1
                  ? "已自动扣款"
                  : params.row.status == 2 ? "扣款失败" : ""
            );
          }
        }
      ],
      interestData:[],
      ordercolumns: [
        {
          title: "承租人",

          key: "name"
        },

        {
          title: "联系方式",

          key: "phone"
        },

        {
          title: "房源名称",

          key: "housename"
        },

        {
          title: "月租金（元）",

          key: "monthmoney"
        }
      ],

      orderdata: [],

      chooseorder_placeholder: "选择订单",

      myorderid: "",

      chooseperoid_placeholder: "选择期数",

      paydate: "2018-06-07",

      chooseorder: "0",

      chooseperoid: "0",

      orderList: [
        {
          value: "0",

          label: "选择订单"
        }
      ],

      columnsList: [
        {
          title: "序号",

          type: "index",

          align: "center",

          width: 80
        },

        {
          title: "承租人",

          key: "name",

          align: "center",

          width: 80
        },

        {
          title: "联系方式",

          key: "phone",

          align: "center",

          width: 120
        },

        {
          title: "房源名称",

          //   key: "title",

          align: "center",

          render: (h, params) => {
            return h(
              "div",
              {},

              params.row.house.title ? params.row.house.title : ""
            );
          },
          width: 200
        },

        {
          title: "租赁期间",

          //   key: "start",

          align: "center",

          render: (h, params) => {
            return h("div", {}, params.row.start + "-" + params.row.end);
          },
          width: 200
        },

        {
          title: "月租金",

          key: "month",

          align: "center",

          width: 100
        },
        // {
        //   title:"周租金",
        //   key:"week",
        //   align:"center",
        //   width:100
        // },
        {
          title: "租房期限",

          key: "term",

          align: "center",

          width: 100
        },

        {
          title: "收款周期",

          key: "payment",

          align: "center",

          width: 100
        },

        {
          title: "管理费",

          key: "rate",

          align: "center",

          width: 80

          //   render
        },

        {
          title: "每日管理费",

          key: "alone",

          align: "center",

          width: 120
        },

        {
          title: "账户余额",

          //   key: "blance",

          align: "center",

          render: (h, params) => {
            return h(
              "div",
              {},

              params.row.user.balance ? params.row.user.balance : ""
            );
          },

          width: 120
        },

        {
          title: "租房信息录入",

          key: "rentmesssage",

          align: "center",

          width: 220
        },
        {
          title: "管理费列表",
          align: "center",
          width: 120,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    this.interest.rent = params.row.id
                    this.interest.show = true
                    this.getInterestList();
                  }
                }
              },
              "查看"
            );
          }
        },
        {
          title: "订单状态",

          align: "center",

          render: (h, params) => {
            return h(
              "Tag",
              {
                props: {
                  type: "border",

                  color:
                    params.row.status == 0
                      ? "yellow"
                      : params.row.status == 1 ? "green" : "red"
                }
              },

              params.row.status == 0
                ? "用户未确定"
                : params.row.status == 1 ? "已成交" : params.row.status == 3 ? "已失效" : "已过期"
            );
          },
          width: 120
        },

        {
          title: "操作",

          align: "center",

          key: "handle",

          width: 220,

          handle: ["delete"]
        }
      ],

      tableData: [],

      tableShow: {
        count: 0,

        page: 1,

        size: 10
      },

      ordertable: {
        show: false
      },

      modalSetting: {
        show: false,

        loading: false,

        index: 0
      },

      modalRentViewSetting: {
        show: false,

        loading: false,

        index: 0
      },

      modalRentSetting: {
        show: false,

        loading: false,

        index: 0
      },

      formItem: {
        id: 0,
        cash_term:1,
        rate: 3,
        month: 0
      },

      ruleValidate: {
        salesman:[
          {required:true,message:'请选择业务员'}
        ]
      },

      loadingHouse: false,

      houses: [],

      user: [],

      loadingUser: false,

      rentForm: {
        time:null,
        id: 0,

        term: 0,

        money: 0.0,

        // rentMoney: 0,

        create_time: "",

        termed: 0,

        terms: 0
      },

      rentColumns: [
        {
          type: "index",

          title: "序号",

          align: "center",
          width: 45,
          flexed: "left"
        },

        {
          title: "开始时间",

          key: "start",

          align: "center"
        },

        {
          title: "结束时间",

          key: "end",

          align: "center"
        },

        {
          title: "缴纳期数",

          key: "terms",

          align: "center"
        },

        {
          title: "缴纳金额",

          key: "money",

          align: "center"
        },

        {
          title: "录入时间",

          key: "create_time",

          align: "center"
        },

        {
          title: "备注信息",

          key: "desc",

          align: "center",

          width: 320
        }
      ],

      rentData: [],

      rentTableShow: {
        page: 1,

        count: 0,

        size: 10,

        rent: 0
      },

      salesman: [],

      loadingSalesman: false
    };
  },

  computed: {
    // rentMoney() {
    //   return Math.round(this.rentForm.money * this.rentForm.term * 100) / 100;
    // },
    week(){
      return Math.ceil(this.formItem.month/4)
    }
  },

  created() {
    this.getList();

    this.init();
  },

  methods: {
    init() {
      this.columnsList.forEach(item => {
        if (item.key === "handle") {
          item.render = (h, params) => {
            return h("div", [
              editButton(this, h, this.tableData[params.index], params.index),

              deleteButton(this, h, this.tableData[params.index], params.index)
            ]);
          };
        } else if (item.key === "rentmesssage") {
          item.render = (h, params) => {
            return h("div", [
              addrentButton(
                this,

                h,

                this.tableData[params.index],

                params.index
              ),

              viewButton(this, h, this.tableData[params.index], params.index)
            ]);
          };
        }
      });
    },

    clickshowordertable() {
      this.ordertable.show = true;
    },

    alertAdd() {
      this.modalSetting.show = true;
    },

    changePage(page) {
      this.tableShow.page = page;

      this.getList();
    },
    changeInterestPage(page) {
      this.interest.page = page;

      this.getInterestList();
    },
    rentChangePage(page) {
      this.rentTableShow.page = page;

      this.getRentOrder();
    },

    changeSize(size) {
      this.tableShow.size = size;

      this.getList();
    },
    changeInterestSize(size) {
      this.interest.size = size;

      this.getInterestList();
    },
    
    rentChangeSize(size) {
      this.rentTableShow.size = size;

      this.getRentOrder();
    },

    doCancel(data) {
      if (!data) {
        this.formItem.id = 0;

        this.$refs["myForm"].resetFields();

        this.modalSetting.loading = false;

        this.modalSetting.index = 0;
      }
    },

    cancel() {
      this.modalSetting.show = false;
    },

    submit() {
      this.$refs["myForm"].validate(validate => {
        if (validate) {
          this.formItem.week = this.week
          this.modalSetting.loading = true;

          if (this.formItem.id === 0) {
            console.log(this.formItem)
            axios.post(resourse, this.formItem).then(response => {
              this.modalSetting.loading = false;

              this.modalSetting.show = false;
            });
          } else {
            axios

              .put(resourse + this.formItem.ruleId, this.formItem)

              .then(response => {
                this.modalSetting.loading = false;

                this.modalSetting.show = false;
              });
          }

          this.getList();
        }
      });
    },

    getList() {
      axios
        .get(resourse, {
          params: {
            page: this.tableShow.page,

            size: this.tableShow.size
          }
        })
        .then(response => {
          this.responseHandle(response);
        });
    },

    searchHouse(query) {
      if (query !== "") {
        this.loadingHouse = true;

        axios
          .get("house/search", {
            params: {
              key: query
            }
          })
          .then(response => {
            let res = response.data;

            this.loadingHouse = false;

            if (res.code === 200) {
              this.houses = res.data.list;
            } else {
              if (res.code === 403) {
              } else {
                this.$Message.error(res.msg);
              }
            }
          });
      } else {
        this.options1 = [];
      }
    },

    searchSalesman(query) {
      if (query !== "") {
        this.loadingSalesman = true;

        axios
          .get("salesman/search", {
            params: {
              key: query
            }
          })
          .then(response => {
            let res = response.data;

            this.loadingSalesman = false;

            if (res.code === 200) {
              this.salesman = res.data.list;
            } else {
              if (res.code === 403) {
              } else {
                this.$Message.error(res.msg);
              }
            }
          });
      } else {
        this.options1 = [];
      }
    },

    searchUser(query) {
      if (query !== "") {
        this.loadingUser = true;

        axios
          .get("users/search", {
            params: {
              key: query
            }
          })
          .then(response => {
            let res = response.data;

            this.loadingUser = false;

            if (res.code === 200) {
              this.user = res.data.list;
            } else {
              if (res.code === 403) {
              } else {
                this.$Message.error(res.msg);
              }
            }
          });
      } else {
        this.options1 = [];
      }
    },

    startTime(time) {
      this.formItem.start = time;
    },

    billTime(time) {
      this.rentForm.create_time = time;
    },

    endTime(time) {
      // this.formItem.end = time;
      console.log(this.formItem.end)
    },

    responseHandle(response) {
      let res = response.data;

      if (res.code === 200) {
        this.tableData = res.data.list;

        this.tableShow.count = res.data.count;
      } else {
        if (res.code === 403) {
          this.$store.commit("logout", this);

          this.$router.push({
            name: "login"
          });
        } else {
          this.$Message.error(res.msg);
        }
      }

      this.cancel();
    },
    getRealTime(time){
      let YMR = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`;
      let HMS = ` ${time.getHours() < 10 ? "0"+time.getHours():time.getHours()}:${time.getMinutes() < 10 ? "0"+time.getMinutes():time.getMinutes()}:${time.getSeconds() < 10 ? "0"+time.getSeconds():time.getSeconds()}`
      return YMR + HMS;
    },
    submitRentForm() {
      this.rentForm.create_time = this.getRealTime(this.rentForm.time)
      // console.log(str)
      axios.post("rent/order", this.rentForm).then(response => {
        this.modalRentSetting.show = false;

        let res = response.data;

        if (res.code === 200) {
          this.rentForm.term =0
          this.rentForm.money = 0.0
          this.$Message.success(res.msg);
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
        this.getList();
      });
    },

    getRentOrder(id) {
      axios

        .get("rent/order", {
          params: this.rentTableShow
        })

        .then(response => {
          let res = response.data;

          if (res.code === 200) {
            this.rentData = res.data.list;

            this.rentTableShow.count = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);

              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    queryMoney(value){
      console.log(this.rentForm.term);
      
      if(this.rentForm.term!=0){
        axios.get('rent/money',{params:{id:this.rentForm.id,term:this.rentForm.term}}).then(response=>{
          let res = response.data
          if(res.code==200){
            console.log(res);
            
            this.rentForm.money = res.data.money
          }
        });
      }
    },
    getInterestList() {
      // console.log(item);
      axios.get('rent/interest/'+this.interest.rent,{params:{page:this.interest.page,size:this.interest.size}}).then(response=>{
        let res = response.data
        if(res.code===200){
          this.interest.count = res.data.count
          this.interestData = res.data.list

        } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);

              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
      });
    },
    doCancelTerm(){
      this.rentForm.term=0
      this.rentForm.money=0
    },
    Term(){

    },
    getCountDays (date) {
      var curDate = new Date(date[0], date[1]);
      curDate.setDate(0);
      return curDate.getDate();
    },
    modifierDate (date, month) {
      let modifierMonth = date[1] + month;
      if (modifierMonth > 12) {
        date[1] = modifierMonth - 12;
        date[0] += 1;
      } else {
        date[1] = modifierMonth;
      }
      return date;
    },
    modifierDay (date) {
      var day = this.getCountDays(date);
      if (date[2] > day) {
        date[2] = day;
      } 
      else if (date[2] === 1) {
        date[1] = date[1] - 1;
        date[2] = this.getCountDays(date);
      }
      else {
        date[2] = date[2] - 1;
      }
      return date;
    },
    changeStartSetEnd () {
      let start = this.formItem.start;
      let term = this.formItem.term;
      if (term !== undefined && start !== "") {
        let date = start.split("-").map(function (item) {
          return parseInt(item)
        });
        if (term >= 100) {
          term = term - 100;
          if (term === 0) {
            date = this.modifierDate(date, 6);
          } else {
            date[0] += term;
          }
        } else {
          date = this.modifierDate(date, term);
        }
        date = this.modifierDay(date);
        const endDate = `${date[0]}-${date[1]<10?"0"+date[1]:date[1]}-${date[2]<10?"0"+date[2]:date[2]}`;
        this.formItem.end = endDate;
        this.date.end = endDate;
      }
    }
  }
};
</script>

